<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="70px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="选择日期"> 
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.startDate" :clearable='false' :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="startDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">-</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.endDate" :clearable='false' :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="endDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>              
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="类型">
                            <el-select v-model="query.type" placeholder="请选择" style="width:100%;" @change='selectType'>
                                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="支付方式">
                            <el-select v-model="query.payType" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in payTypeList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="exportTable()">导出</el-button>
                </div>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column label="日期" align="center">
                    <template scope="scope">
                        <span>{{scope.row.date | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="类型" align="center">
                    <template scope="scope">
                        <span>{{scope.row.type | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="支付方式" align="center">
                    <template scope="scope">
                        <span>{{scope.row.payType | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="流入金额（元）" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.cashInput?'--':Number(scope.row.cashInput).toFixed(2) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="流出金额（元）" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.cashOutput?'--':Number(scope.row.cashOutput).toFixed(2) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class='note'>
                <p><font color='red'>* </font>余额统计是以用户拥有余额总数的角度统计的。</p>
                <p class='month-data' v-if="this.totalList">截止至{{currentDate}}日24点，用户拥有余额总额：{{totalList.money==''?'0':Number(totalList.money).toFixed(2)}} 元。</p>
            </div>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import startDate from 'components/Datepicker/startDate';   
    import endDate from 'components/Datepicker/endDate';
    import { queryCash } from 'api/integralManage';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'balanceTable',
        components: { Levelbar, TableLayout, startDate, endDate },
        data() {
            return { 
                loading: true,  
                totalList: '',
                currentDate: '',
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    startDate: new Date() - 3600 * 1000 * 24,
                    endDate: new Date() - 3600 * 1000 * 24,
                    type: '',
                    payType: ''
                },

                typeList: [{
                    value: '',
                    label: '请选择'
                }, {
                    value: '40001',
                    label: '充值'
                }, {
                    value: '40002',
                    label: '提现'
                }, {
                    value: '40003',
                    label: '购买积分'
                }, {
                    value: '40005',
                    label: '购买商品'
                }, {
                    value: '40006',
                    label: '红包'
                }, {
                    value: '7000',
                    label: '学校缴费'
                }, {
                    value: '7001',
                    label: '缴费退款'
                }, {
                    value: '50002',
                    label: '一卡通充值'
                }, {
                    value: '50003',
                    label: '一卡通退款'
                }, {
                    value: '8000',
                    label: '超级会员'
                }, {
                    value: '8001',
                    label: '学习礼包'
                }, {
                    value: '6000_123547',
                    label: '校园e直播'
                }, {
                    value: '6000_123551',
                    label: '空中课堂'
                }, {
                    value: '6000_123552',
                    label: '报平安'
                }, 
                {
                    value: '6000_123553',
                    label: '家校通'
                }, {
                    value: '6001_123547',
                    label: '校园e直播卡券'
                }, {
                    value: '6001_123551',
                    label: '空中课堂卡券'
                }, {
                    value: '6001_123552',
                    label: '报平安卡券'
                }, {
                    value: '6001_123553',
                    label: '家校通卡券'
                }, {
                    value: '8002',
                    label: '超级会员+报平安'
                }, {
                    value: '8003',
                    label: '超级会员+e直播'
                }, {
                    value: '8004',
                    label: '超级会员+报平安+e直播'
                }],

                // 超级会员+报平安  8002
                // 超级会员+e直播 8003
                // 超级会员+报平安+e直播 8004
                // 校园e直播  6000_123547
                // 空中课堂	  6000_123551
                // 报平安  6000_123552
                // 校园e直播卡券  6001_123547
                // 空中课堂卡券   6001_123551
                // 报平安卡券  6001_123552	

                payTypeList: [{
                    value: '',
                    label: '请选择'
                }, {
                    value: '0',
                    label: '微信'
                }, {
                    value: '1',
                    label: '支付宝'
                }, {
                    value: '2',
                    label: 'e学云余额'
                }],
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now() - 3600 * 1000 * 24);
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now() - 3600 * 1000 * 24) || (time.getTime()) < (Date.now() - 3600 * 1000 * 24 * 2);
                    }
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            queryData() {
              
                let type = this.query.type; 
                let payType = this.query.payType;  
                // let dataStart = this.query.startDate==''?'':(moment(this.query.startDate).format('YYYY-MM-DD') + ' 00:00:00'); // 查询开始时间
                // let dataEnd = this.query.endDate==''?'':(moment(this.query.endDate).format('YYYY-MM-DD') + ' 23:59:59'); // 查询结束时间    
                let dataStart = this.query.startDate?moment(this.query.startDate).format('YYYY-MM-DD')+' 00:00:00' : '';
                let dataEnd = this.query.endDate?moment(this.query.endDate).format('YYYY-MM-DD')+' 23:59:59' : '';
                this.currentDate = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY/MM/DD');
              
                queryCash(this.pageQuery.currentpage, this.config.pageSize, type, payType, dataStart, dataEnd).then(response => {
                    this.loading = false;
                    if (!response.data.content.info) {
                        this.tableData = [];
                        this.pageQuery.total = 0;
                    }
                    this.tableData = response.data.content.info.list;
                    this.pageQuery.total = response.data.content.info.pagination.total;
                    this.totalList = response.data.content.totalInfo;
                }).catch(() => {
                    this.loading = false;
                })
            },
            startDateChange(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < new Date(date).getTime() - 864e5) || (time.getTime() > new Date().getTime() - 864e5);
                    }
                }
            },
            endDateChange(date) {
                this.pickerOptions1 = {
                    disabledDate(time) {
                        return (time.getTime() > new Date(date).getTime());
                    }
                } 
            },

            // 导出
            exportTable() {
                let type = this.query.type; 
                let payType = this.query.payType;  
                // let dataStart = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); // 查询开始时间
                // let dataEnd = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); // 查询结束时间  
                let dataStart = this.query.startDate?moment(this.query.startDate).format('YYYY-MM-DD')+' 00:00:00' : '';
                let dataEnd = this.query.endDate?moment(this.query.endDate).format('YYYY-MM-DD')+' 23:59:59' : '';
                window.location.href = `${LOCAL_API.cm}/point/manage/outExcelByCash?type=${type}&payType=${payType}&dataStart=${dataStart}&dataEnd=${dataEnd}`;
            },

            selectType(val) {
                this.query.payType = '';
                if (val == '40002') {
                    this.payTypeList = [{
                        value: '',
                        label: '请选择'
                    }, {
                        value: '2',
                        label: 'e学云余额'
                    }];
                } else if (val == '40006') {
                    this.payTypeList = [{
                        value: '',
                        label: '请选择'
                    }];
                } else {
                    this.payTypeList = [{
                        value: '',
                        label: '请选择'
                    }, {
                        value: '0',
                        label: '微信'
                    }, {
                        value: '1',
                        label: '支付宝'
                    }, {
                        value: '2',
                        label: 'e学云余额'
                    }];
                }
            }
        }

    }
</script>

<style lang="scss" scoped>
    .main-content {
        .note {
            font-size: 14px;
            color: #333;
            padding-left: 20px;
            padding-top: 15px;
        }
        .month-data {
            font-size: 14px;
        }
    }
</style>

